<template>

  <div class="demo-form-top">
    <div class="demo-input-size">
      <label style="margin-right: 10px;">车型名称 </label>
      <el-input
          style="width: 200px"
          v-model="input1"
          class="w-50 m-2"
          size="large"
          placeholder="请输入车型名搜索"
          :suffix-icon="Search"
      />
    </div>
    <div class="demo-input-size">
      <label style="margin-right: 10px;">车型编号 </label>
      <el-input
          style="width: 200px"
          v-model="input2"
          class="w-50 m-2"
          size="large"
          placeholder="请输入车型编号搜索"
          :suffix-icon="Search"
      />
    </div>

    <div class="demo-button-size">
      <el-button type="primary" @click="getVehicleList">搜索</el-button>
    </div>
    <div class="demo-button-size">
      <el-button type="success" @click="addOpen">新增</el-button>
    </div>
    <div class="demo-button-size">
      <el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
        <template #reference>
          <el-button type="danger"  :disabled="delBtlStatu">批量删除</el-button>
        </template>
      </el-popconfirm>
    </div>
  </div>


  <div class="demo-table-size">
    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        stripe
        border
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"  />
      <el-table-column property="vehNum" label="车型编号"  align="center" />
      <el-table-column property="name" label="车型名称"  align="center" />
      <el-table-column property="headImg" label="用户头像" align="center">
        <template #default="scope">
          <el-image
              style="width: 60px; height: 60px"
              :src="baseUrl+scope.row.headImg"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :initial-index="4"
              fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column property="bname" label="品牌" align="center"  />
      <el-table-column property="category" label="类型" align="center"  />
      <el-table-column property="modelYear" label="年款" align="center"  />
      <el-table-column property="modelNum" label="型号" align="center"  />
      <el-table-column  label="配置信息" align="center"  >
        <template #default="scope">
              <el-button type="info" @click="getVehicleSetting(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column property="icon"  align="center" width="300" label="操作">
        <template #default="scope">
          <el-button type="primary" v-if="scope.row.status == 0"  @click="toVehicleGoods(scope.row.id)" >租赁上架</el-button>
          <el-tag v-else-if="scope.row.status == 1"  type="success">已上架</el-tag>
          <el-divider direction="vertical"></el-divider>
          <el-button type="primary"  @click="editHandle(scope.row.id)" >编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="这是一段内容确定删除吗？" @click="delHandle(scope.row.id)"     @confirm="">
            <template #reference>
              <el-button type="danger" >删除</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>

    </el-table>
    <div style="margin-top: 15px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="float: right;margin-right: 30px"
          small
          background
          :page-sizes="[5, 10, 20, 30]"
          v-model:total="pageParam.total"
          layout="total, sizes, prev, pager, next"
          class="mt-4"
          v-model:current-page="pageParam.current"
          v-model:page-size="pageParam.size"
      />


    </div>
  </div>

  <!--新增对话框-->
  <el-dialog
      :title="dialogName"
      v-model="dialogVisible"
      width="600px"
      :before-close="handleClose">

    <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="editForm"  >

      <div class="from-item-div">
        <el-form-item label="车型编号" prop="vehNum" >
          <el-input  v-model="editForm.vehNum"  ></el-input>
        </el-form-item>
        <el-form-item label="车型名称" prop="name" >
          <el-input  v-model="editForm.name" ></el-input>
        </el-form-item>
      </div>
      <div class="from-item-div">
        <el-form-item label="型号" prop="modelNum" label-width="60px">
          <el-input  v-model="editForm.modelNum" ></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="category" label-width="60px">
          <el-input  v-model="editForm.category" ></el-input>
        </el-form-item>
      </div>
      <div class="from-item-div">
        <el-form-item label="品牌" prop="brandId" label-width="60px">
          <el-select v-model="editForm.brandId"  placeholder="汽车所属品牌" @change="setBrandId" size="large">
            <el-option
                v-for="item in brands"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年款"  prop="modelYear" label-width="60px">
          <el-input-number v-model="editForm.modelYear" :min="1900" :max="2030" />
        </el-form-item>
      </div>


      <el-form-item label="车辆图片"  prop="headImg" label-width="100px">
        <UploadUtil  v-model="editForm.headImg" :message="parentMessage"  @childEvent="handleChildEvent" />
      </el-form-item>


      <div class="from-item-div">
        <el-form-item label="排量"  prop="displacement" label-width="60px">
          <el-input   v-model="editForm.displacement" />
        </el-form-item>
        <el-form-item label="箱数"  prop="compartments" label-width="60px">
          <el-input   v-model="editForm.compartments" />
        </el-form-item>
      </div>
      <div class="from-item-div">
        <el-form-item label="燃料类型" prop="fuel" label-width="80px">
          <el-input  v-model="editForm.fuel" ></el-input>
        </el-form-item>
        <el-form-item label="燃料标号" prop="fuelNum" label-width="80px">
          <el-input  v-model="editForm.fuelNum" ></el-input>
        </el-form-item>
      </div>
      <div class="from-item-div">
        <el-form-item label="邮箱容积" prop="mailbox" label-width="80px">
          <el-input  v-model="editForm.mailbox" ></el-input>
        </el-form-item>
        <el-form-item label="养护里程" prop="mileage" label-width="80px">
          <el-input  v-model="editForm.mileage" ></el-input>
        </el-form-item>
      </div>
      <div class="from-item-div">
        <el-form-item label="座位数"  prop="seats" label-width="60px">
          <el-input-number v-model="editForm.seats" :min="0" :max="300" />
        </el-form-item>
        <el-form-item label="车门数"  prop="doors" label-width="60px">
          <el-input-number v-model="editForm.doors" :min="0" :max="30" />
        </el-form-item>
      </div>


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm(ruleFormRef)">取 消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
    </div>
    <el-form-item  prop="id" >
      <el-input type="hidden" v-model="editForm.id" ></el-input>
    </el-form-item>
  </el-dialog>


  <el-dialog v-model="dialogTableVisible" width="450px" title="车型配置信息">
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
      <div class="shared-style">
        排量: <el-tag class="ml-2 info-tag" type="success">{{vehicleSettingInfo.displacement}}</el-tag>
      </div>
      <div class="shared-style">
        箱数: <el-tag class="ml-2 info-tag" type="success">{{vehicleSettingInfo.compartments}}</el-tag>
      </div>
      <div class="shared-style">
        燃料类型: <el-tag class="ml-2 info-tag" type="info">{{vehicleSettingInfo.fule}}</el-tag>
      </div>
      <div class="shared-style">
        燃料标号: <el-tag class="ml-2 info-tag" type="info">{{vehicleSettingInfo.fuleNum}}</el-tag>
      </div>
      <div class="shared-style">
        邮箱容积: <el-tag class="ml-2 info-tag" type="warning">{{vehicleSettingInfo.mailbox}}</el-tag>
      </div>
      <div class="shared-style">
        养护里程: <el-tag class="ml-2 info-tag" type="warning">{{vehicleSettingInfo.mileage}}</el-tag>
      </div>
      <div class="shared-style">
        座位数: <el-tag class="ml-2 info-tag">{{vehicleSettingInfo.seats}}</el-tag>
      </div>
      <div class="shared-style">
        车门数: <el-tag class="ml-2 info-tag">{{vehicleSettingInfo.doors}}</el-tag>
      </div>
    </div>
  </el-dialog>


  <!--车辆租赁上架-->
  <el-dialog
      title="租赁上架"
      v-model="dialogVisible2"
      width="600px"
      :before-close="handleClose2">

    <el-form
        ref="ruleFormRef2"
        :rules="rules2"
        :model="goodsForm"  >

      <el-form-item label="主标题" prop="heading" label-width="80px">
        <el-input  v-model="goodsForm.heading" ></el-input>
      </el-form-item>
      <el-form-item label="副标题" prop="subtitle" label-width="80px">
        <el-input  v-model="goodsForm.subtitle" ></el-input>
      </el-form-item>
      <el-form-item label="展示图"  prop="headImg" label-width="100px">
        <UploadUtil  v-model="goodsForm.headImg" :message="parentMessage"  @childEvent="handleChildEvent2" />
      </el-form-item>
      <el-form-item label="单位价格"  prop="price" label-width="100px">
        <el-input-number v-model="goodsForm.price" :min="1" :max="10000000" />
      </el-form-item>

      <el-form-item label="简介"  prop="blurb" label-width="100px">
        <el-input  v-model="goodsForm.blurb"  :autosize="{ minRows: 5, maxRows: 15}"  type="textarea"  autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose2">取 消</el-button>
      <el-button type="primary" @click="submitForm2(ruleFormRef2)">确 定</el-button>
    </div>
    <el-form-item  prop="vehId" >
      <el-input type="hidden" v-model="goodsForm.vehId" ></el-input>
    </el-form-item>
    <el-form-item  prop="vehNum" >
      <el-input type="hidden" v-model="goodsForm.vehNum" ></el-input>
    </el-form-item>
  </el-dialog>




</template>
<script setup>


import {Search} from "@element-plus/icons-vue";
import {inject, nextTick, onMounted, reactive, ref} from "vue";
import UploadUtil from "@/components/UploadUtil.vue";
import { ElMessage } from 'element-plus';
import axios from "@/axios.js"


const baseUrl = '../../public/img/'



const input1 = ref('')
const input2 = ref('')
const brands = ref([])
onMounted(()=>{
  getVehicleList()
  getBrands()
})
const setBrandId = (val)=>{
  editForm.value.brandId = val
  console.log(editForm.value.brandId )


}
const getBrands = ()=>{
  axios.get("/brand/selectBrands").then(res=>{
      brands.value = res.data
  })
}
const selectStatus = ref("")

const tableData = ref(
    [
      {


      }
    ]
)
const pageParam = ref({
  current:1,
  total:10,
  size:5
})

//分页查询
const getVehicleList = ()=>{
  axios.get(`/vehicle/list`,{
    params: {
      name: input1.value,
      vehNum:input2.value,
      current: pageParam.value.current,
      size: pageParam.value.size
    }
  }).then(res=>{
    tableData.value = res.data.records
    pageParam.value.current = res.data.current
    pageParam.value.total= res.data.total
    pageParam.value.size = res.data.size
  })
}

const handleSizeChange = (val)=>{
  console.log(`每页 ${val} 条`)
  pageParam.value.size = val
  getVehicleList()
}
const handleCurrentChange = (val)=>{
  console.log(`当前页: ${val}`)
  pageParam.value.current = val
  getVehicleList()
}


const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  console.log("勾选")
  console.log(val)
  multipleSelection.value = val
  delBtlStatu.value = val.length==0
}
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach(row => {
      multipleTableRef.value.toggleRowSelection(row)
    });
  } else {
    multipleTableRef.value.clearSelection();
  }
}

const delBtlStatu = ref(true)

//删除/批量删除
const delHandle = (id) => {

  var ids = []
  if (id) {
    ids.push(id)
  } else {
    multipleSelection.value.forEach(row => {
      ids.push(row.id)
    })
  }
  console.log(ids)

  axios.post("/vehicle/delete", ids).then(res => {
    ElMessage({
      showClose: true,
      message: '恭喜你，删除成功',
      type: 'success',
      onClose: () => {
        getVehicleList() // 在消息关闭时调用getBrandList方法
      }
    });
  })
}




//图片上传部分
const handleChildEvent = (data) => {
  console.log('Received from child: ' + data);
  parentMessage.value = data
  editForm.value.headImg = parentMessage
};
const parentMessage = ref('');



//新增/编辑
const dialogVisible = ref(false)
const handleClose = ()=>{
  dialogVisible.value = false
  parentMessage.value= ""
  editForm.value = ref({})
}

const editForm = ref({


})


const ruleFormRef = ref(null)

const rules = reactive({
  vehNum: [{ required: true, message: '车辆编号不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '车辆名称不能为空', trigger: 'blur' }],
  modelNum: [{ required: true, message: '型号不能为空', trigger: 'blur' }],
  category: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
  brandId: [{ required: true, message: '品牌不能为空', trigger: 'blur' }],
  modelYear: [{ required: true, message: '年款不能为空', trigger: 'blur' }],
  headImg: [{ required: true, message: '车辆图片不能为空', trigger: 'change' }],
});
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(editForm.value)
      axios.post('/vehicle/' + (editForm.value.id?'update':'save'), editForm.value)
          .then(res => {

            ElMessage({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                getVehicleList() // 在消息关闭时调用getBrandList方法
              }
            });
            dialogVisible.value =false
            resetForm(ruleFormRef)
          })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const editHandle = (id) => {

  axios.get('/vehicle/info/' + id).then(res => {
    editOpen()
    nextTick(() => {
      editForm.value = res.data
      parentMessage.value = editForm.value.headImg
    })

  })
}
const resetForm = (formEl) => {
  if (!formEl) return
  parentMessage.value = ""
  formEl.resetFields()
}


const dialogName = ref("")

const addOpen = ()=>{
  dialogName.value = "新增"
  dialogVisible.value = true
}
const editOpen = ()=>{
  dialogName.value = "编辑"
  dialogVisible.value = true
}



const handleChildEvent2 = (data) => {
  console.log('Received from child: ' + data);
  parentMessage.value = data
  goodsForm.value.headImg = parentMessage
};


//租赁上架
const dialogVisible2 = ref(false)
const rules2 = reactive({
  heading: [{ required: true, message: '主标题不能为空', trigger: 'blur' }],
  subtitle: [{ required: true, message: '副标题不能为空', trigger: 'blur' }],
  headImg: [{ required: true, message: '展示图不能为空', trigger: 'change' }],
  price: [{ type: 'number', required: true, message: '单位价格必须为数字且不能为空', trigger: 'blur' }],
  unit: [{ required: true, message: '单位不能为空', trigger: 'blur' }],
  sizes: [{ type: 'number', required: true, message: '最大租借数量必须为数字且不能为空', trigger: 'blur' }],
});


const ruleFormRef2 = ref(null)
const goodsForm = ref({

})
const toVehicleGoods = (id)=>{
  axios.get("/goods/toVehicleGoods/"+id).then(res=>{
    goodsOpen()
    nextTick(() => {
        goodsForm.value = res.data
        parentMessage.value = goodsForm.value.headImg
    })
  })

}
const submitForm2 = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(goodsForm.value)
      axios.post('/goods/addGoods', goodsForm.value)
          .then(res => {
            ElMessage({
              showClose: true,
              message: '恭喜你，上架成功',
              type: 'success',
              onClose: () => {
                getVehicleList() // 在消息关闭时调用getBrandList方法
              }
            });
            dialogVisible2.value =false
            resetForm(formEl)
          })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const goodsOpen = ()=>{
    dialogVisible2.value = true
}
const handleClose2 = ()=>{
  dialogVisible2.value = false
  parentMessage.value= ""
  goodsForm.value = ref({})
}

//车辆配置信息
const dialogTableVisible = ref(false)
const vehicleSettingInfo = ref({})
const getVehicleSetting = (data)=>{
    vehicleSettingInfo.value = data
    dialogTableVisible.value = true
}



</script>


<style scoped>
.demo-form-top{

}

.demo-button-size{
  float: left;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-left: 7px;
}

.demo-input-size{
  float: left;
  width: 300px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.demo-table-size{

  margin-top: 20px;
}

.dialog-footer{
  margin-left: 100px;
}


.from-item-div{
  display: flex;
  flex-direction: row;
}
.from-item-div .el-form-item {
  margin-right: 10px; /* 两个元素之间的横向间距 */
}

.shared-style {
  width: 150px;
  margin-bottom: 10px;
}
.info-tag {
  min-width: 50px; /* 设置最小宽度 */
  max-width: 100px; /* 设置最大宽度 */
  display: inline-block; /* 设置display为inline-block以便宽度生效 */
  overflow: hidden; /* 隐藏超出宽度的内容 */
  text-overflow: ellipsis; /* 超出宽度时显示省略号 */
  white-space: nowrap; /* 不换行 */
  padding-top: 4px;
  text-align: center;
}


</style>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-table__header thead th {
  background-color: #F5F7FA!important;
}

</style>